﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <div class="box">
            <ul>
                <li>这是li01</li>
                <li>这是li02</li>
                <li>这是li03</li>
                <li>这是li04</li>
                <li>这是li05</li>
            </ul>
        </div>
        <ul>
            <li>lili01</li>
            <li>lili02</li>
            <li>lili03</li>
            <li>lili04</li>
            <li>lili05</li>
        </ul>
    </header>
    <script>
         // jQuery 是一个 JavaScript 库。
        // console.log(jQuery); //函数对象
        // console.log($); //函数对象
        // $ === jQuery

        // jquery获取的标签不可以直接使用js中dom的属性和方法
        // js中dom获取的标签也不可以使用jquery中的属性和方法

        // 获取的标签叫jquery对象
        // $("选择器") 会查找到所有符合选择器的标签 一个或多个
        console.log($("header"));
        console.log($("header,.box"));
        console.log($(".box li"));

        console.log($(".box li:first")); //找到第一个li
        console.log($(".box li").first());

        console.log($(".box li:last")); //找到第eq(n) 中索引值n为n的li标签
        console.log($(".box li").last()); //找到第eq(n) 中索引值n为n的li标签

        console.log($(".box li:lt(2)")); //获取小于参数索引值的标签 找的是0 1
        

        console.log($(".box li:gt(2)")); //获取大于参数索引值的标签 找的是3 4
      

        console.log($(".box li:eq(2)")); //找到第eq(n) 中索引值n为n的li标签
        // .eq(index) 获取第index个li标签 获取的还是jquery对象
        console.log($(".box li").eq(3));

        var lis = document.querySelectorAll("li");
        console.log(lis);
        console.log(lis[0]);
        // lis[0].innerHTML = "内容";

        // 可以将jquery对象转换成dom对象
        console.log($(".box li")[3]);
        // console.log($("header").get(0)); 
        // $("header")[0].innerHTML = "内容"


        // $(dom对象) 将dom对象转换成jquery对象
        console.log($(lis[0]));
    </script>
</body>
</html>